<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image :src="userinfo.face"></image></view>
				<view class="info">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">积分:{{userinfo.integral}}</view>
				</view>
			</view>
			<view class="icon-btn">
				<view class="icon tongzhi" @tap="msg()"></view>
				<view class="icon setting" @tap="setting()"></view>
			</view>
		</view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover"  @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<image :src="'../../static/img/user/'+row.icon"></image>
					</view>
					{{row.name}}
				</view>
			</view>
		</view> 
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><image :src="'../../static/img/user/sever/'+li.icon"></image></view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="../../static/img/user/to.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import "@/static/iconfont/font.scss";
	export default {
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus:true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus:false,
				//#endif
				userinfo:{},
				orderTypeLise:[
					//name-标题 icon-图标 badge-角标
					{name:'待付款',icon:'l1.png',badge:1,url:''},
					{name:'待发货',icon:'l2.png',badge:2,url:''},
					{name:'待收货',icon:'l3.png',badge:6,url:''},
					{name:'待评价',icon:'l4.png',badge:9,url:''},
					{name:'退换货',icon:'l5.png',badge:0,url:''}
				],
				severList:[
					[
						{name:'我的收藏',icon:'point.png',url:''},
						{name:'我的优惠券',icon:'quan.png',url:'../../pages/coupou/coupou'},
						{name:'领卷中心',icon:'renw.png',url:''},
						{name:'红包',icon:'momey.png',url:''},
						{name:'收货地址',icon:'addr.png',url:'../../pages/address/address'}
					],
					[
						{name:'积分明细',icon:'mingxi.png',url:''},
						{name:'银行卡',icon:'bank.png',url:''},
						{name:'安全中心',icon:'security.png',url:''},
						{name:'在线客服',icon:'kefu.png',url:''},
						{name:'推广二维码',icon:'choujiang.png',url:'../../pages/qrcode/qrcode'},
					],
				],
			};
		},
		onLoad() {
			//加载
			this.init();
		},
		
		//下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},3000)
		},
		methods: {
			init() {
				//用户信息
				this.userinfo={
					face:'../../static/img/user/face.jpeg',
					username:"VIP会员10240",
					integral:"1435"
				}		
			},
			//用户点击订单类型
			toOrderType(index){
				uni.showToast({title: this.orderTypeLise[index].name});
			},
			//用户点击列表项
			toPage(list_i,li_i){
				uni.showToast({title: this.severList[list_i][li_i].name});
				
				if(this.severList[list_i][li_i].url != '')
				{
					uni.navigateTo({
						url:this.severList[list_i][li_i].url,
					})
				}
			},
			
			setting(){
				uni.showToast({
					title:'设置'
				})
			},
			
			msg(){
				uni.navigateTo({
					url:'../msg/msg'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color:#fff
}
.header{
	&.status{
		padding-top:var(--status-bar-height);
	}
	background-color:#ff6364;
	width:92%;
	height:30vw;
	padding:0 4%;
	display:flex;
	align-items:center;
	
	.userinfo{
		width:90%;
		display:flex;
		.face{
			flex-shrink:0;
			width:15vw;
			height:15vw;
			//圆角
			image{
				width:100%;
				height:100%;
				border-radius:100%
			}
		}
		.info{
			display:flex;
			flex-flow:wrap;
			padding-left:20rpx;
			.username{
				width:100%;
				color:#fff;
				font-size:40rpx
			}
			.integral{
				display:flex;
				align-items:center;
				padding:0 20rpx;
				height:40rpx;
				color:#fff;
				background-color:rgba(0,0,0,0.1);
				border-radius:20rpx;
				font-size:24rpx
			}
		}
	}
	.setting{
		flex-shrink:0;
		width:6vw;
		height:6vw;
		image{
			width:100%;
			height:100%;
		}
	}
	.icon-btn{
		width: 120rpx;
		height: 60rpx;
		flex-shrink: 0;
		display: flex;
		.icon{
			color: #fff;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 42rpx;
		}
	}
}

.hover{
	background-color:#eee
}

.orders{
	background-color:#ff6364;
	width:92%;
	height:11vw;
	padding:0 4%;
	margin-bottom:calc(11vw + 40rpx);
	display:flex;
	align-items:flex-start;
	border-radius:0 0 100% 100%;
	margin-top: -1rpx;
	.box{
		width:98%;
		padding:0 1%;
		height:22vw;
		background-color:#fefefe;
		border-radius:24rpx;
		box-shadow:0 0 20rpx rgba(0,0,0,0.15);
		display:flex;
		align-items:center;
		justify-content:center;
		.label{
			display:flex;
			align-items:center;
			justify-content:center;
			flex-flow:wrap;
			width:100%;
			height:16vw;
			color:#666666;
			font-size:26rpx;
			.icon{
				position:relative;
				width:7vw;
				height:7vw;
				margin:0 1vw;
				.badge{
					position:absolute;
					width:4vw;
					height:4vw;
					background-color:#ec6d2c;
					top:-1vw;
					right:-1vw;
					border-radius:100%;
					font-size:20rpx;
					color:#fff;
					display:flex;
					align-items:center;
					justify-content:center;
					z-index: 10;
				}
				image{
					width:7vw;
					height:7vw;
					z-index: 9;
				}
			}
		}
	}
}
.list{
	width:100%;
	border-bottom:solid 26rpx #f1f1f1;
	.li{
		width:92%;
		height:100rpx;
		padding:0 4%;
		border-bottom:solid 1rpx #e7e7e7;
		display:flex;
		align-items:center;
		
	&.noborder{
		border-bottom:0rpx
		}
		.icon{
			flex-shrink:0;
			width:50rpx;
			height:50rpx;
			image{
				width:50rpx;
				height:50rpx
			}
		}
		.text{
			padding-left:20rpx;
			width:100%;
			color:#666
		}
		.to{
			flex-shrink:0;
			width:40rpx;height:40rpx
		}
	}
}
</style>
